import {useEffect, useState} from "react";

function App() {
    const [list, setList] = useState([])
    let [count, setCount] = useState(0);

    // 定义一个函数并调用，设置 list

    /*
     依赖项         副作用函数的执行时机
    没有依赖项          组件初始渲染 + 组件更新时执行

    空数组依赖          只在初始渲染时执行一次

    添加特定依赖项       组件初始渲染 + 依赖项变化时执行
     */

    useEffect(() => {
        async function getList(){
            let res = await fetch('http://geek.itheima.net/V1_0/channels');
            let resJson = await res.json();
            setList(resJson.data.channels);
        }

        getList()
    }, [])

    return <div>
        this is app
        <ul>
            <button onClick={() => setCount(count + 1)}>+{count}</button>
            {/*{list.map(item => <li key={item.id}>{item.name}</li>)}*/}
        </ul>
    </div>
}

export default App;